<template>
  <div class="commHeader">
    <router-link :to="pathName">
      <div class="iconfont backIcon">&#xe671;</div>
    </router-link>
    <span class="headerName">
      <slot></slot>
    </span>
  </div>
</template>

<script>
export default {
  name: 'HeaderWithBack',
  props: {
    pathName: String
  }
}
</script>
<style lang="scss" scoped>
@import "~styles/layout.scss";
  .commHeader{
    background-color: $bgColor;
    height: 86px;
    line-height: 86px;
    font-size:28px;
    text-align: center;
    color: #ffffff;
    position: relative;
    .backIcon{
      @include flex(row);
      justify-content: flex-start;
      align-items: center;
      position: absolute;
      width: 20%;
      height: 100%;
      padding-left: 20px;
      box-sizing: border-box;
      font-size: 28px;
      color: #ffffff;
      z-index: 999;
    }
  }
</style>
